<!-- 渔塘记录 -->
<template>
  <div class="fishing-pond">
    <van-nav-bar @click-right="onClickRight" safe-area-inset-top style="background: rgb(77, 173, 249)">
      <template #right>
        <img style="width: 25px" src="../../assets/images/加号.png" @click="add()" alt="" />
      </template>
    </van-nav-bar>


    <!-- 顶部tab -->
    <van-tabs class="tabbar" v-model="tabbar" color="rgb(77, 173, 249)" background="none" animated
      title-active-color="#fff" title-inactive-color="rgb(203, 232, 245)" @click="onClick">

      <van-tab name="1" title="巡塘记录">
        <patrol-record ref="mychild1" :list="list"></patrol-record>
      </van-tab>
      <van-tab name="2" title="用药记录">
        <feed-record ref="mychild2" :list="list"></feed-record>
      </van-tab>
      <van-tab name="3" title="卖出记录">
        <sell-record ref="mychild3" :list="list"></sell-record>
      </van-tab>
    </van-tabs>

    <van-calendar v-model="show" type="range" @confirm="onConfirm" />
  </div>
</template>

<script>
import Bus from '../../utils/bus.js'
import sellRecord from "./module/sell-record.vue";
import feedRecord from "./module/feed-record.vue";
import patrolRecord from "./module/patrol-record.vue";
export default {
  name: "",
  components: {
    sellRecord,
    feedRecord,
    patrolRecord,
  },
  data() {
    return {
      tabbar: "1",
      list: [],
      show: false
    };
  },
  methods: {
    Bus() {
      var that = this;
      Bus.$on('chitang', (data) => {

        console.log("chitang", data);
        that.tabbar = data + "";


      })

      Bus.$on('dateshow', (data) => {

        console.log("dateshow", data);
        that.show = true;


      })


    },
    onClick(value, item) {

      console.log("sss", value, item);

      if (value == "1") {
        // this.$refs.mychild1.getData();
      } else if (value == "2") {

      } else if (value == "3") {

      }

    },
    // 添加记录
    add() {
      this.$router.push({ path: "/add-record", query: { type: this.tabbar } });
    },
    onClickRight() {

    },
    formatDate(date) {
          return this.$moment(date).format("YYYY-MM-DD");
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;

      console.log("ok", this.date);
      var stime = this.formatDate(start);
      var etime = this.formatDate(end);



      if (this.tabbar == "1") {
        this.$refs.mychild1.setDate(stime, etime)
      } else if (this.tabbar == "2") {
        this.$refs.mychild2.setDate(stime, etime)
      } else if (this.tabbar == "3") {
        this.$refs.mychild3.setDate(stime, etime)
      }


    },
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {

  },
  beforeMount() {
    this.Bus()
  },
};
</script>

<style lang="scss" scoped>
:deep(.van-tabs__content) {
  width: 100vw;
}

.fishing-pond {
  width: 100%;
  height: 100%;
  position: relative;
  padding-bottom: 120px;

  .tabbar {
    width: 80%;
    position: absolute;
    top: 2px;
    z-index: 999;
  }
}
</style>